<template>
    <div class="container mx-auto p-4">
        <div class="text-center pb-3">{{ article.data.title }}</div>
        <div>{{ article.data.desc }}</div>
        <div>{{ article.data.content }}</div>
    </div>
</template>

<script setup>
const route = useRoute()
const id = ref(route.params.slug)
const url = `https://xingapi.com/api/v1/curd/xm-articles/` + id.value
const { data: article, error } = await useFetch(url)

useHead({
  title: article.value.data.title,
  meta: [ { name: 'description', content: article.value.data.desc } ],
})
</script>